<template>
  <!--element-ui-->
  <div class="header">
    <div class="nav-left">
      <span>自动化测试平台</span>
      <!--<div style="color: #fff; size: 22px">青苔</div>-->
    </div>

    <div class="nav-right " v-if='userInfo.access_token'>
      <span @click="personal" class="my-color">个人中心</span>
      <span class="user">{{userInfo.username}}</span>
      <img :src="head_img" alt="">
      <el-button type="text" class="my-color" @click="remoItem()">退出</el-button>
    </div>
    <!-- </el-dropdown> -->
    <div class="nav-right" v-else>
      <span>登录</span>
      &nbsp;| &nbsp;
      <span>注册</span>


    </div>
  </div>


</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        isShow: false
      };
    },
    methods: {
      remoItem() {
        let queryData = {
          access_token:this.userInfo.access_token
        };
        this.$http.getApiFunc(this.$http.addApiStatus)(this.$http.userExitUrl,queryData)
          .then(res => {
            // this.$alert(res.data.msg, '提示', {confirmButtonText: '确定'});
            localStorage.clear();
            var userInfo = localStorage.getItem("userInfo");
            userInfo = JSON.parse(userInfo);
            this.$store.dispatch('getUserInfo', userInfo);
            this.$router.push({path: '/login'});
          })
          .catch(err => {
            console.log(err)
          });
      },
      personal() {
        this.$router.push({path: '/personal', query: {'account_id': this.userInfo.id}});
      }
    },
    // props: ['headerMenu']

    computed: {
      head_img() {
        if (this.$store.state.userInfo.head_img) {
          return this.$http.HOST + this.$store.state.userInfo.head_img
        }

      },
      userInfo() {
        return this.$store.state.userInfo;
      }
    }
  };
</script>

<style scoped>
  .my-color {
    color: #fff;
    padding-right: 10px
  }

  .header {
    background-color: #545c64;
  }

  .nav-left {
    float: left;
    position: relative;
    z-index: 100;
    padding: 0 20px;
  }

  .nav-left span {
    color: #fff;
  }

  .nav-right {
    float: right;
    position: relative;
    z-index: 100;
    padding: 0 20px;

  }

  .nav-right span {
    cursor: pointer;
    color: #fff;
  }

  .nav-right .user {
    margin-right: 15px;
  }

  .nav-right img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
  }

  .nav-right ul {
    position: absolute;
    width: 221px;
    z-index: 100;
    font-size: 12px;
    top: 80px;
    background: #fff;
    border-top: 2px solid #d0d0d0;
    box-shadow: 0 2px 4px 0 #e8e8e8;
  }

  .nav-right ul li {
    height: 40px;
    color: #4a4a4a;
    padding-left: 30px;
    padding-right: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all .2s linear;
  }

  .nav-right ul li span.msg {
    margin-left: -80px;
    color: red;
  }

  .nav-right ul li span.count {
    margin-left: -100px;
    color: red;
  }
</style>
